<template>
    <!-- 报表数据 -->
    <div class="report-data app-container">
        <el-card class="report-content">
            <yi-public-search :searchConfig="searchConfig" :onQuery="onQuery"></yi-public-search>
            <div class="button">
                <el-button type="primary" @click="addReport()">新增</el-button>
            </div>
            <yi-table ref="table" :data="table.data" :total="table.total" @getData="getData"
                :option="{ current: 'pageSize', page: 'pageNum' }" height="calc(100vh - 355px)">
                <el-table-column label="报表名称" width="200">
                    <template slot-scope="{ row }">{{ row.title }}</template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="{ row }">
                        <el-tag :type="hanldeStatusType(row.status)">{{ hanldeStatusVal(row.status) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否绑定分组">
                    <template v-slot="{ row }">{{ handleGroup(row) }}</template>
                </el-table-column>
                <el-table-column label="备注" width="260">
                    <template v-slot="{ row }">{{ row.remark }}</template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="{ row }">
                        <el-button type="text" @click="previewReportData(row)">预览</el-button>
                        <el-button type="text" @click="editReportData(row)" :disabled="canClick(row)">编辑</el-button>
                        <el-button type="text" @click="releaseReportData(row)">{{ handleReleaseVal(row) }}</el-button>
                        <el-button type="text" @click="deleteReportData(row)" :disabled="canClick(row)">删除</el-button>
                    </template>
                </el-table-column>
            </yi-table>
        </el-card>
        <!-- 预览组件 -->
        <yi-dialog title="预览" class="render-dialog" width="1000px" fullscreen isHandle :isConfirm="false" top="10vh"
            :visible.sync="dialogVisible" :loading.sync="dialogLoading">
            <report-render ref="reportRender"></report-render>
            <span slot="more" class="render-function">
                <el-button icon="el-icon-printer" size="small" type="primary" @click.stop="printer()">打印</el-button>
                <el-button icon="el-icon-download" size="small" type="primary" @click.stop="exportPDF()">导出</el-button>
            </span>
        </yi-dialog>
        <yi-dialog title="图像" :visible.sync="aaaa_dialogVisible" width="1000px">
            <img v-for="(item, index) in textSrc" :key="index" :src="item" alt="">
        </yi-dialog>
    </div>
</template>

<script>
import { selectCustomReportPageLike, deleteCustomReport, updateCustomReport } from "@/api/ReportDesign/ReportDesign.js";
import { ReportRender } from "./components/index";
import { success, info } from "@/utils/errorInfo";
export default {
    name: "ReportData",
    components: {
        ReportRender
    },
    data() {
        return {
            params: {},
            searchConfig: [
                {
                    name: 'title',
                    label: '报表名称',
                    type: 'input'
                }
            ],
            table: {
                data: [],
                total: 0
            },
            dialogVisible: false,
            dialogLoading: false,
            // 测试代码
            aaaa_dialogVisible: false,
            textSrc: []
        }
    },
    methods: {
        onQuery(params) {
            this.params = params;
            this.$refs.table && this.$refs.table.refresh();
        },
        refresh() {
            this.$refs.table && this.$refs.table.refresh();
        },
        getData({ pageSize, pageNum }) {
            selectCustomReportPageLike({ reportType: 0, ...this.params, pageSize, pageNum }).then((res) => {
                this.table.data = res?.rows || [];
                this.table.total = res?.total || 0;
                this.$refs.table.loading = false;
                this.$refs.table.doLayout();
            })
        },
        canClick(row) { // 功能限制
            let lock = false;
            if (row.status == 2) lock = true;
            else lock = false;
            return lock;
        },
        addReport() { // 新增
            let url = '';
            if (process.env.NODE_ENV === "production") url = `${window.location.origin}/reportDesign`;
            // if (process.env.NODE_ENV === "production") url = `${window.location.origin}/daily-maintenance-ui/#/reportDesign`;
            // else url = `${window.location.origin}/#/reportDesign`;
            else url = `${window.location.origin}/reportDesign`;
            window.open(url, "_blank");
        },
        visibilitychange() { // 处理浏览器切换tab
            this.$nextTick(() => {
                if (!document.hidden) this.refresh();
            })
        },
        previewReportData(row) { // 预览
            this.dialogVisible = true;
            this.$nextTick(() => {
                let reportData = JSON.parse(row.content);
                this.$refs.reportRender.render(reportData);
            })
        },
        editReportData(row) { // 编辑
            console.log(process.env.NODE_ENV);
            let url = '';
            if (process.env.NODE_ENV === "production") url = `${window.location.origin}/reportDesign?id=${row.id}&status=${row.status}`;
            // if (process.env.NODE_ENV === "production") url = `${window.location.origin}/daily-maintenance-ui/#/reportDesign?id=${row.id}&status=${row.status}`;
            // else url = `${window.location.origin}/#/reportDesign?id=${row.id}&status=${row.status}`;
            else url = `${window.location.origin}/reportDesign?id=${row.id}&status=${row.status}`;
            window.open(url, "_blank");
        },
        releaseReportData(row) { // 发布
            let confirmText = '';
            let status = null;
            if (row.status === 1) {
                confirmText = '是否将报表发布上线?';
                status = 2;
            } else if (row.status === 2) {
                confirmText = '是否将报表进行下线，下线后将无法查看该报表?';
                status = 3;
            } else if (row.status === 3) {
                confirmText = '是否将报表重新上线?';
                status = 2;
            }
            this.$confirm(confirmText, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                updateCustomReport({
                    id: row.id,
                    status
                }).then((res) => {
                    this.$refs.table && this.$refs.table.getData();
                    success('操作成功');
                })
            }).catch(() => {
                info('已取消操作');
            })
        },
        deleteReportData(row) { // 删除
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteCustomReport([row.id]).then((res) => {
                    this.refresh();
                    success('删除成功');
                })
            }).catch(() => {
                info('已取消操作');
            });
        },
        printer() { // 打印
            this.$nextTick(() => {
                this.$refs.reportRender.print();
            });
        },
        exportPDF() { // 导出pdf
            this.dialogLoading = true;
            this.$nextTick(() => {
                this.$refs.reportRender.exportPDF().then(() => {
                    this.dialogLoading = false;
                })
            });
        },
        handleGroup(row) {
            let content = JSON.parse(row.content);
            let value = null;
            if (content.bindDict.options && content.bindDict.options.length > 0) {
                value = content.bindDict.options.map(item => item.dictLabel);
                value = value.toString();
            } else value = '未绑定';
            return value;
        },
        // 辅助函数
        hanldeStatusType(status) {
            let object = {
                1: 'info',
                2: 'success',
                3: "danger"
            }
            return object[status];
        },
        hanldeStatusVal(status) {
            let object = {
                1: "草稿",
                2: '已发布',
                3: "已下线"
            }
            return object[status];
        },
        handleReleaseVal(row) {
            let value = '';
            if (row.status == 1) value = '发布';
            else if (row.status == 2) value = "下线";
            else if (row.status == 3) value = "上线";
            return value;
        }
    },
    mounted() {
        // 监听浏览器tab切换
        document.addEventListener("visibilitychange", this.visibilitychange);
    }
}
</script>

<style lang="scss">
.report-data {
    zoom: 90%;

    .report-content {
        .el-card__body {
            padding: 15px;
        }
    }

    .button {
        margin: 15px 0;
    }
}

.render-dialog .el-dialog__body {
    background: #e0e0e0;
    position: relative;
    padding: 0;
    height: 520px;
}

.render-function {
    margin-right: 10px;
    //     position: absolute;
    //     z-index: 10;
    //     left: 10px;
    //     top: 15px;
    //     display: flex;
    //     flex-direction: column;
    //     .el-button + .el-button {
    //         margin-left: 0;
    //         margin-top: 10px;
    //     }
}
</style>